<template>
  <div>
    <Nav />
    <section class="header-brand" v-if="carList">
      <div v-for="item in carList[0].info.brand" :key="item.brand_id">
        <img :src="item.image_url" alt="" />
        <span>{{ item.brand_name }}</span>
      </div>
    </section>
    <section class="header-series" v-if="carList">
      <div v-for="item in carList[0].info.series" :key="item.series_id">
        <img :src="item.cover_image" alt="" />
        <span>{{ item.series_name }}</span>
      </div>
    </section>
    <a class="search" href="javascript:;"
      >按价格、级别、排量等条件选车<i></i
    ></a>

    <section class="brand-list" v-if="carList">
      <div class="title" v-for="(item, index) in initialsList" :key="index">
        <div>
          {{ item.info.pinyin }}
        </div>
      </div>
      <div class="brand" v-for="item in brandList" :key="item.info.brand_name">
        <img :src="item.info.image_url" alt="" />
        <span>{{ item.info.brand_name }}</span>
      </div>
    </section>
  </div>
</template>

<script>
import Nav from '@/components/Nav/index1.vue'
export default {
  components: {
    Nav
  },
  data() {
    return {
      carList: false,
      initialsList: false,
      brandList: false
    }
  },
  async created() {
    const res = await this.$axios.get('/motor/brand/m/v1/brand/?device_id=0')
    this.carList = res.data.data
    this.initialsList = this.carList.filter((item) => {
      return item.type === '1000'
    })
    this.brandList = this.carList.filter((item) => {
      return item.type === '1001'
    })
  }
}
</script>

<style lang="scss" scope>
img {
  transition: opacity 0.2s ease-in-out 0s;
}
.header-brand {
  margin-top: 1.92rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.3rem 0.2rem;
  min-height: 1rem;
  div {
    display: flex;
    align-items: center;
    font-size: 0.28rem;
    color: rgb(102, 102, 102);
    img {
      opacity: 1;
      width: 0.4rem;
      height: 0.4rem;
    }
  }
}
.header-series {
  padding: 0px 0.2rem 0.08rem;
  min-height: 4.16rem;
  font-size: 0px;
  div {
    display: inline-block;
    width: calc(33.3333%);
    margin-top: 0.2rem;
    font-size: 0.28rem;
    text-align: center;
    img {
      display: block;
      margin: 0px auto;
      width: 2.1rem;
      height: 1.4rem;
      object-fit: contain;
    }
    span {
      display: block;
      line-height: 0.44rem;
      font-size: 0.28rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: rgb(51, 51, 51);
    }
  }
}
.search {
  display: block;
  text-align: center;
  height: 0.72rem;
  line-height: 0.72rem;
  color: rgb(51, 51, 51);
  font-size: 0.28rem;
  i {
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    background: url(/img/right.png) 0px 0px / contain no-repeat;
  }
}
.brand-list {
  .title {
    top: 1.92rem;
    left: 0px;
    z-index: 1;
    position: sticky !important;
    height: 0.56rem;
    div {
      display: block;
      width: 100%;
      padding: 0.08rem 0.2rem 0.08rem 0.3rem;
      font-size: 0.28rem;
      line-height: 0.4rem;
      color: rgb(102, 102, 102);
      background: rgb(244, 245, 246);
    }
  }

  .brand {
    display: flex;
    align-items: center;
    img {
      width: 0.8rem;
      height: 0.8rem;
      margin: 0px 0.3rem;
      pointer-events: none;
    }
    span {
      display: flex;
      padding: 0.44rem 0px;
      line-height: 0.34rem;
      font-size: 0.28rem;
      color: rgb(102, 102, 102);
      pointer-events: none;
    }
  }
}
</style>
